<template>
    <a-popover trigger="click" placement="right">
        <template slot="content">
              <a-checkbox-group @change="onColChange" v-model="settingColumns" :defaultValue="settingColumns">
                <a-row style="width: 500px">
                  <template v-for="(item, index) in defColumns">
                    <template>
                      <a-col :span="8">
                        <a-checkbox :value="item.dataIndex">
                          <j-ellipsis :value="item.title" :length="10"></j-ellipsis>
                        </a-checkbox>
                      </a-col>
                    </template>
                  </template>
                </a-row>
              </a-checkbox-group>
            </template>
            <a-button icon="setting">{{ $t('commodityManagement.columnSettings') }}</a-button>
          </a-popover>
</template>

<script>
    import JEllipsis from '@/components/jeecg/JEllipsis'
    import Vue from 'vue';
    export default {
        props:{
            columns:{
                type:Array,
                default:()=>[],
            }
        },
        components: {
            JEllipsis
        },
        data(){
                return{
                    settingColumns:[],
                    defColumns:[],
                }
        },
        // watch: {
        //     columns(newValue, oldValue) {
        //         if(!this.defColumns.length){
        //             this.defColumns = newValue
        //         }
        //         this.initColumnsSetting()
        //     }
        // },
        created(){
            this.defColumns = this.columns
            this.initColumnsSetting()
        },
        methods:{
            //列设置更改事件
            onColChange(checkedValues) {
                this.$emit('columnsChange',checkedValues,this.defColumns)
                let columnsStr = checkedValues.join()
                Vue.ls.set(this.getColumnsStorageName(), columnsStr)
            },
            getColumnsStorageName(){
                return this.$route.name.replace(/ /g,'') + '_columns'
            },
            
            // //加载初始化列
            initColumnsSetting() {
                let columnsStr = Vue.ls.get(this.getColumnsStorageName())
                if (columnsStr && columnsStr.indexOf(',') > -1) {
                    this.settingColumns = columnsStr.split(',')
                }else{
                    this.settingColumns = this.defColumns.map(v=>v.dataIndex)
                }
                this.onColChange(this.settingColumns)
            },
            setDefColumns(columns){
              this.defColumns = columns
            }
        },
    }
</script>

<style scoped>

</style>